<template>
  <div>
      <div class="header-container">
            <div class="header" >   
                <div class="icon-back" v-on:click="back"></div>        
                <div class="title">还价</div>
                <div class="icon-more" @click="appear"></div>            
            </div>   
            <div class="more" v-show="show">
                <ul>
                    <router-link to="/msg"><li> <i class="msg"></i><span>消息</span></li></router-link>
                    <router-link to="/home"><li class="bottom"> <i class="home "></i><span>首页</span></li></router-link>
                </ul>
            </div>
      </div>
      <div class="goods">
          <div class="role">
               <div class="specific" v-if="item">                          
                <div class="specific_detail" >
                    <img :src="imgUrl[item.type]" alt="" >
                    <div class="info ">
                        <div class="row first">
                            <span class="gs" v-show="item.is_counteroffer==1"></span>
                            <span class="hj" v-if="item.is_counteroffer==2"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                            <span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>

            </div>
              
        </div>
          </div>
          <div class="counter-num">已有<span class="red">17</span>人还价</div>
      </div>
      <div class="counter">
          <div class="price">
              <div class="yuan">金额(元)</div>
              <input type="text" class="input-num" v-model="bargain">
              <i class="close"  @click="clean()" v-show="bargain.length>0"></i>
          </div>
          <div class="rule clear">
              <div class="chance">还剩<span class="red">3</span>次还价机会</div>
              <div class="btn" @click="bargainPrice(bargain)">确定还价</div>
              <div class="tips">
                  <p class="ts">提示:</p>
                  <div class="pic">
                    <div class="pic-one">1</div>
                    <div class="content">还价被接受后24小时内可用还价价格购买对应物品，期间该物品仍可被其它买家购买，请尽快完成支付。</div>
                  </div>
                  
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
import LoginAxios from "@/pages/common/LoginAxios";
export default {
    data(){
        return{
            show:false,
            bargain:'',
            item:{},
            imgUrl:Pictures.imgUrl,
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
            };
            },
        
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        appear(){
            this.show=!this.show
        },
        clean(){
        this.bargain='';
        },
       async bargainPrice(bargain){
            var id =this.$route.query.id   
            var price=this.bargain
            var param={"shop_id":id,"price":price};
            var result= this.csList=await LoginAxios.loginAxios("http://81.68.253.206:8081/role/counterOffer",param,"/counter?id="+id);
            if(result){
               this.$router.push({path: '/detail',query: {id:id}})
            }
        }
    },
    mounted(){
     var id =this.$route.query.id   
     axios.get("http://81.68.253.206:8081/page/getRoleBase?id="+id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.item=res.data.data;
      }
    })
   },
    
    

}
</script>

<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-more {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/more.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}

.more{
    position: absolute;
    height: rem(300);
    width: rem(350);
    z-index: 999;
    top: rem(140);
    right: rem(20);
    background-color: #21202c;
    border-radius: rem(20);
    padding:0 rem(30);
    .bottom{
    border-top: 1px solid grey;
    }
    li{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height:rem(150) ;
        font-size: rem(50);
        color: #fff;
        .msg{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/xinfwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .home{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/homewhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .collection{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/scwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        span{
            margin-left: rem(30);
            flex: 1;
        }
    }
}
.more::after{
    content: '';
    display: block;
    width: rem(20);
    height: rem(20);
    position: absolute;
    right: rem(40);
    top: rem(-10);
    transform: rotate(45deg);
    opacity: .93;
    background-color: #21202c;
}
.goods{
    width: 100%;
    height: rem(400);
    background-color: #fff;
    margin-top: rem(145);
    padding: 0 rem(30);
    .role{
        width: 100%;
        height: rem(300);
    }
    .counter-num{
        font-size: rem(35);
        color: #888;
        text-align: right;
        .red{
            color:#e74e4b;
        }
    }
}
.counter{
    width: 100%;
    background-color: #fff;
    margin-top: rem(15);
    padding: rem(30);
    .price{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height: rem(150);
        border-bottom: 1px solid #ccc;
        .close{
          width: rem(40);
          height: rem(40);
          margin: rem(40) ;
          background: url(../../assets/imgs/close.svg) no-repeat 50% 50%;
          background-size: auto 100%;
        }
        .yuan{
            margin-top: rem(-20);
            font-size: rem(45);
            width: rem(200);
        }
        .input-num{ 
            margin-top: rem(-15);
            font-size: rem(45);
            flex: 1;
            height: rem(140);
            line-height: rem(140);
            margin-left: rem(30);
            outline: none;
            border: 0;
        }
    }
    .rule{
        margin-top: rem(30);
        width: 100%;
        .chance{
            font-size: rem(40);
            .red{
            color:#e74e4b;
        }
        }
        .btn{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        margin-top: rem(40);
        border-radius: rem(65);
        background-color: #e74e4b;
        font-size: rem(45);
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
      .tips{
          .ts{
              font-size: rem(40);
              font-weight: 400;
          }
          .pic{
              width: 100%;
              margin-top: rem(-10);
              .pic-one{
                  float: left;
                    width: rem(50);
                    height: rem(50);
                    border-radius: rem(25);
                    line-height: rem(50);
                    text-align: center;
                    font-size: rem(40);
                    color: #fff;
                    background: #c7c7c7;
                    margin-top: rem(10);
                }
              .content{
                float: left;
                width: 94%;
                font-size: rem(40);
                margin-left: rem(30);
            }
          }
          
      }

    }
}
.clear{clear:both;}
.specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            border-top: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .gs{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                }
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                    }

                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                    }

                    .apple {
                        display: inline-block;
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(45);
                        height: rem(45);
                        background: url(../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
        }
     
    

    
</style>
